<template>
  <div class="mwDetailBox">
    <div class="topBox">
      <p>详细信息</p>
      <a-icon
        type="close"
        @click="onClose"
        :style="{ fontSize: '16px', color: '#525252', float: 'right', margin: '10px' }"
      />
    </div>
    <a-button class="btn" @click="onUpdate">更新数据</a-button>
    <CustomTable
      ref="table"
      :showAlert="false"
      :columns="columns"
      :dataSource="pageData"
      :showSelection="false"
      :showPagination="true"
      rowKey="id"
      @change="onTableChange"
    >
      <template slot="action" slot-scope="text, record">
        <a @click="onViewLocation(record)" type="link" style="padding:0;">研判</a>
      </template>
    </CustomTable>
  </div>
</template>

<script>
// import { skpz } from '@/api'
import CustomTable from '@/components/zxd/Table/CustomTable'
export default {
  props: ['visible'],
  components: {
    CustomTable
  },
  data() {
    return {
      pageFilter: {
        pageNo: 1,
        pageSize: 10
      },
      pageData: [
        { id: '1', phone: '1111111', name: '张三', task: '发胜多负少', trackCount: '5' },
        { id: '2', phone: '2222222', name: '李四', task: '水电费费', trackCount: '25' }
      ],
      columns: [
        {
          title: '序号',
          dataIndex: 'order',
          width: 80,
          customRender: (text, record, index) =>
            `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize + (index + 1)}` //序号分页后连续
        },
        {
          title: '其他手机号',
          dataIndex: 'phone',
          // width: 110,
          scopedSlots: { customRender: 'phone' }
        },
        {
          title: '归属地',
          dataIndex: 'task',
          // width: 110,
          scopedSlots: { customRender: 'task' }
        },
        {
          title: '操作',
          width: 100,
          align: 'center',
          dataIndex: 'action',
          // slots: { title: 'customIsAction' },
          scopedSlots: { customRender: 'action' }
        }
      ]
    }
  },
  mounted() {
    // this.refreshTable()
  },
  methods: {
    onUpdate() {},
    onViewLocation() {
      let arr = [
        {
          list: [
            { key: 0, longitude: '125.177238', latitude: '43.974533' },
            { key: 1, longitude: '125.209433', latitude: '43.819878' }
          ]
        }
      ]
      // 绘制轨迹
      this.$emit('on-task-details-drawer', arr)
    },
    refreshTable() {
      this.loading = true
      // alarmApi
      //   .smuWarnConfigList(this.pageFilter)
      //   .then(res => {
      //     if (res.success) {
      //       this.pageData = res.result
      //       this.loading = false
      //       // this.$refs.table.onClearRowKeys()
      //     } else {
      //       this.loading = false
      //     }
      //   })
      //   .catch(e => {
      //     this.loading = false
      //     this.$message.warn('请求失败！')
      //   })
    },
    onTableChange(pagination, pageFilter, sorter) {
      let keyMap = { currentPage: 'pageNo' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter = Object.assign({}, this.pageFilter, paginations)
      this.refreshTable()
    },
    onClose(value) {
      this.$emit('close', value)
    }
    // onClickRow(row, n) {
    //   this.active = n
    //   this.$emit('on-click-row', row)
    // },
  }
}
</script>

<style lang="less" scoped>
.mwDetailBox {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 450px;
  background-color: #fff;
  .topBox {
    background-color: #f2f2f2 !important;
    overflow: hidden;
    p {
      float: left;
      color: #000;
      padding: 15px 10px 0;
      font-weight: 500;
      font-size: 16px;
      // line-height: 22px;
    }
    /deep/.anticon {
      float: right;
      margin: 10px;
    }
  }
  .btn {
    position: absolute;
    right: 40px;
    top: 10px;
  }
}
</style>
